<template>
    <button id="eqButton">{{ text }}</button>

</template>

<script setup>
import { ref, computed, useAttrs, onMounted } from 'vue'
const attrs = useAttrs()
console.log(attrs);

// 文字颜色
const bgColor = computed(() => {
    if (attrs.type === 'one') {
        return 'red'
    } else if (attrs.type === 'two') {
        return 'green'
    } else if (attrs.type === 'three') {
        return 'blue'
    }
    return ''; // 默认值
});
// 边框颜色
const bdColor = computed(() => {
    if (attrs.type === 'one') {
        return 'red'
    } else if (attrs.type === 'two') {
        return 'green'
    } else if (attrs.type === 'three') {
        return 'blue'
    }
    return ''; // 默认值
});
// 边框形状
const bdtype = computed(() => {
    if (attrs.type === 'one') {
        return 'solid'
    } else if (attrs.type === 'two') {
        return 'dashed'
    } else if (attrs.type === 'three') {
        return 'dotted'
    }
    return ''; // 默认值
});
// 高
const height = computed(() => {
    if (attrs.size === 'small') {
        return '20px'
    } else if (attrs.size === 'middle') {
        return '30px'
    } else if (attrs.size === 'large') {
        return '40px'
    }
    return '30px'
})
// 宽
const width = computed(() => {
    if (attrs.size === 'small') {
        return '30px'
    } else if (attrs.size === 'middle') {
        return '50px'
    } else if (attrs.size === 'large') {
        return '70px'
    }
    return '50px'
})
// 字体大小
const fontSize = computed(() => {
    if (attrs.size === 'small') {
        return '7px'
    } else if (attrs.size === 'middle') {
        return '15px'
    } else if (attrs.size === 'large') {
        return '20px'
    }
    return '15px'
})
// 按钮文字
const text = computed(() => {
    return attrs.text
})


</script>

<style scoped>
#eqButton {
    height: v-bind(height);
    width: v-bind(width);
    font-size: v-bind(fontSize);
    border: 2px v-bind(bdtype) v-bind(bdColor);
    display: flex;
    justify-content: center;
    align-items: center;
    color: v-bind(bgColor);
}
</style>